/**
 * 出勤率排行
 */
import React, { Fragment } from 'react';
import { Row, Col, Form, Table } from 'antd';
import { get as getPath } from 'object-path';
import { QuickForm } from 'vv-frontend-components';
import { connect } from 'umi';
import moment from 'moment';
import { formatMessage } from 'umi';
import LinkTo from '@/components/LinkTo';
import { Pagination } from '@/components';
import style from './reportRank.less';

class Attendance extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        this.fetchList();
    }

    handleSubmit = async e => {
        const {
            dispatch,
            reportRank: { paginationAttendance }
        } = this.props;
        e.preventDefault();
        if (paginationAttendance.current !== 1) {
            await dispatch({
                type: 'reportRank/save',
                payload: {
                    paginationAttendance: {
                        ...paginationAttendance,
                        current: 1
                    }
                }
            });
        }
        this.fetchList();
    };

    // 获取列表
    fetchList = () => {
        const { form, reportRank, dispatch } = this.props;
        const { paginationAttendance } = reportRank;
        const { companyDepart, date = { range: [] } } = form.getFieldsValue();
        const param = {
            companyCode: companyDepart?.companyId || '',
            departmentCode: companyDepart?.departmentId || '',
            startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
            endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
            pageNo: paginationAttendance.current,
            pageSize: paginationAttendance.pageSize,
            isLookMore: '2',
            typeCode: ''
        };
        dispatch({
            type: 'reportRank/fetchTrunRank',
            payload: param
        });
    };

    // 页码改变
    changeTable = async pagination => {
        const {
            dispatch,
            reportRank: { paginationAttendance }
        } = this.props;
        await dispatch({
            type: 'reportRank/save',
            payload: {
                paginationAttendance: {
                    ...paginationAttendance,
                    ...pagination
                }
            }
        });
        this.fetchList();
    };

    render() {
        const { loading, reportRank, form } = this.props;
        const { attendanceData, paginationAttendance } = reportRank;
        const { date = { range: [] }, companyDepart } = form.getFieldsValue();
        // const { locale } = new Locale('stat.report');
        const columnsAttendance = [
            {
                dataIndex: 'id',
                key: 'id',
                align: 'center',
                render: (text, record, index) => (
                    <p
                        className={
                            index + paginationAttendance.pageSize * (paginationAttendance.current - 1) < 5
                                ? style.wnP
                                : style.wnOther
                        }
                    >
                        {index + paginationAttendance.pageSize * (paginationAttendance.current - 1) + 1}
                    </p>
                )
            },
            {
                title: `${formatMessage({
                    id: 'stat.absenceList.userName'
                })}`,
                dataIndex: 'userName',
                key: 'userName',
                render: (text, record) => (
                    <span>
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/attendRecord"
                            query={{
                                id: record.employeeCode,
                                employeeName: record.userName || '',
                                companyId: companyDepart && companyDepart.companyId ? companyDepart.companyId : '',
                                departmentId:
                                    companyDepart && companyDepart.departmentId ? companyDepart.departmentId : '',
                                dateType: '',
                                // dateType:
                                //     date && date.type ? date.type : '',
                                startTime:
                                    date && date.range && date.range[0]
                                        ? moment(date.range[0]).format('YYYY-MM-DD')
                                        : '',
                                endTime:
                                    date && date.range && date.range[1]
                                        ? moment(date.range[1]).format('YYYY-MM-DD')
                                        : '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {record.userName}
                        </LinkTo>
                    </span>
                )
            },
            {
                title: `${formatMessage({
                    id: 'stat.absenceList.departName'
                })}`,
                dataIndex: 'departName',
                key: 'departName'
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.position'
                })}`,
                dataIndex: 'position',
                key: 'position'
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.continuous'
                })}`,
                dataIndex: 'continuous',
                key: 'continuous',
                render: (text, record) => <p>出勤率{record.continuous}%</p>,
                sorter: () => {}
            },
            {
                title: `${formatMessage({
                    id: 'stat.absence.action'
                })}`,
                dataIndex: 'action',
                key: 'action',
                render: (text, record) => (
                    <span>
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/attendRecord"
                            query={{
                                id: record.employeeCode,
                                employeeName: record.userName || '',
                                companyId: companyDepart && companyDepart.companyId ? companyDepart.companyId : '',
                                departmentId:
                                    companyDepart && companyDepart.departmentId ? companyDepart.departmentId : '',
                                dateType: '',
                                // dateType:
                                //     date && date.type ? date.type : '',
                                startTime:
                                    date && date.range && date.range[0]
                                        ? moment(date.range[0]).format('YYYY-MM-DD')
                                        : '',
                                endTime:
                                    date && date.range && date.range[1]
                                        ? moment(date.range[1]).format('YYYY-MM-DD')
                                        : '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {formatMessage({
                                id: 'stat.report.toDetail'
                            })}
                        </LinkTo>
                    </span>
                )
            }
        ];
        return (
            <Fragment>
                <Row type="flex" className="searchTitle">
                    <Col>
                        <Form layout="inline" onSubmit={this.handleSubmit}>
                            <QuickForm form={form} config={getPath(this.props, 'config')} />
                        </Form>
                    </Col>
                </Row>
                <Table
                    style={{ marginTop: '12px' }}
                    dataSource={attendanceData}
                    columns={columnsAttendance}
                    loading={loading}
                    className={style.wn_noAsc}
                    rowKey="id"
                    onChange={this.changeTable}
                    pagination={false}
                />
                <Pagination onChange={this.changeTable} {...this.props} {...paginationAttendance} loading={loading} />
            </Fragment>
        );
    }
}

export default connect(({ reportRank, loading }) => ({
    reportRank,
    loading: loading.models.reportRank
}))(Form.create()(Attendance));
